<template>
  <div class="wrap">
    <div class="shipment-type-box">
      <el-radio-group class="platform-radio" v-model="queryParams.shipmentType" size="small" @change="changeShipmentType" :disabled="loading">
        <el-radio-button
          v-for="item in shipmentTypeList"
          :key="item.type"
          :label="item.type"
        >
          {{item.text}}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.labelStatus" placeholder="请选择仓库类型" size="small" class="" @change="changeOption">
          <el-option :label="$t('table.贴标状态')" value=""></el-option>
          <el-option :label="$t('shipment.无需贴标')" :value="-1"></el-option>
          <el-option :label="$t('labelOrder.待确认')" :value="0"></el-option>
          <el-option :label="$t('labelOrder.待贴标')" :value="1"></el-option>
          <el-option :label="$t('labelOrder.已贴标')" :value="2"></el-option>
        </el-select>
      </div>
      <div class="right">
        <el-input
          size="small"
          style="width: 250px; margin-right: 10px; margin-bottom: 10px"
          v-model="queryParams.keyword"
          :placeholder="$t('搜索货件单号')"
          @keyup.enter.native="changeOption"
          clearable
          @clear="changeOption"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>
        <el-button type="warning" @click="addPlan">添加移仓货件</el-button>
      </div>
    </div>
    <div>
      <el-tabs v-model="queryParams.status2" @tab-click="changeOption">
        <el-tab-pane
          v-for="item in shipmentStatusList"
          :key="item.status"
          :label="`${item.text}(${item.num})`"
          :name="item.status"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <el-table
        :data="data"
        border
        v-loading="loading"
      >
        <el-table-column
          :label="$t('table.shipmentNumber')"
          prop="shipmentNo"
          align="center"
          min-width="250"
          show-overflow-tooltip
          fixed="left"
        >
          <template slot-scope="{row}">
            <diy-link @click="jumpInfo(row)">{{row.shipmentNo}}</diy-link>
          </template>
        </el-table-column>
        <el-table-column
          label="发货计划"
          prop="shippingPlanNo"
          align="center"
          min-width="250"
        >
          <template v-slot="{row}">
            <diy-link @click="jumpPageNewTag('shippingPlanInfo',{id: row.planId})">{{row.shippingPlanNo}}</diy-link>
          </template>
        </el-table-column>
        <el-table-column
          label="移仓类型"
          prop="moveWarehouseType"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{getMWTypeStr(row.moveWarehouseType)}}
          </template>
        </el-table-column>
        <el-table-column
          label="货柜号"
          prop="containerNo"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{ row.containerNo || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="haveLogisticsNo"
          label="物流单号"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{row.haveLogisticsNo ? '有物流单号' : '无物流单号'}}
          </template>
        </el-table-column>
        <el-table-column
          label="箱子数量"
          prop="exBoxNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status2 === FINISHED_SHELVES()">
              <num2 :right-num="row.exBoxNum" :left-num="row.rlBoxNum"></num2>
            </template>
            <template v-else>
              {{row.exBoxNum}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="SKU种数"
          prop="exSkuNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status2 === FINISHED_SHELVES()">
              <num2 :right-num="row.exSkuNum" :left-num="row.rlSkuNum"></num2>
            </template>
            <template v-else>
              {{row.exSkuNum}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量"
          prop="exSkuNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <template v-if="row.status2 === FINISHED_SHELVES()">
              <num2 :right-num="row.exGoodsNum" :left-num="row.rlGoodsNum"></num2>
            </template>
            <template v-else>
              {{row.exGoodsNum}}
            </template>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('table.贴标状态')"
          prop="labelStatus"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.labelOrder ? getLabelStatusStr(row.labelOrder.status) : '-'}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.createTime2')"
          prop="createTime"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          label="上架时间"
          prop="confirmTime"
          align="center"
          width="180"
        >
          <template v-slot="{row}">
            {{row.confirmTime || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="货件类型"
          prop="shipmentType"
          min-width="100"
          align="center"
        >
          <template v-slot="{row}">
            {{getShipmentTypeStr2(row.shipmentType) || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="货件状态"
          prop="status2"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{getShipmentStatus2Str(row.status2)}}
          </template>
        </el-table-column>
      <el-table-column
          label="操作员"
          prop="userAccount"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.child_name">
               {{row.child_name}}
            </template>
            <template v-else>
               {{row.userAccount}}
            </template>

          </template>
        </el-table-column>

        <el-table-column
          :label="$t('table.operate')"
          prop="操作"
          align="left"
          min-width="250"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-button @click="jumpInfo(row)" type="view">{{$t('common.view')}}</el-button>
            <el-button v-if="row.labelOrder" @click="jumpLabelOrderInfo(row.labelOrder.id, true)" type="primary" class="mgb10">{{$t('route.labelList')}}</el-button>
            <el-button v-if="row.combinationOrder" @click="jumpCombinationInfo(row.combinationOrder.id, true)" type="primary" class="mgb10">{{$t('combination.组装工单')}}</el-button>
            <del-shipment-button :id="row.id" :data="row" @delRow="getData"></del-shipment-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap mgt10">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {deleteShipment} from "@/api/shipment";
import {deepCopy, getFalabellaName, getMercadoName, getShopeeName} from "@/utils";
import {getWareHouseName} from "@/utils/common";
import {jumpCombinationInfo, jumpLabelOrderInfo, jumpPageNewTag} from "@/utils/jumpView";
import ExportBox from "@/views/shipment/components/ExportBox.vue";
import ToolTipShipmentBox from "@/views/shipment/components/ToolTipShipmentBox.vue";
import {getLabelStatusStr} from "@/utils/labelOrder";
import {
  ABOLISHED,
  FINISHED_SHELVES,
  FINISHED_SORTING,
  getShipmentStatus2Str,
  getShipmentTypeStr,
  getShipmentTypeStr2,
  HALF_SHELVES,
  OFFICIAL_DELIVERED,
  WAIT_CONFIRM,
  WAIT_CUSTOMS_CLEARANCE,
  WAIT_CUSTOMS_DECLARATION,
  WAIT_FL_RECEIVE,
  WAIT_MAKE_CABINET,
  WAIT_RECEIVE,
  WAIT_SHIPMENT,
  WAIT_SORTING
} from "@/utils/shipment";
import addShippingPlanMixin from "@/views/shipment/mixin/addShippingPlanMixin";
import Num2 from "@/components/Common/Num2.vue";
import {getShipmentList} from "@/api/shipmentV2";
import {getMWTypeStr, PLAN_TYPE_FL, PLAN_TYPE_MW} from "@/utils/shippingPlan";
import DelShipmentButton from "@/views/shipment/components/DelShipmentButton.vue";

export default {
  name: "shipmentList",
  components: {DelShipmentButton, Num2, ToolTipShipmentBox, ExportBox},
  mixins: [addShippingPlanMixin],
  computed: {
    shipmentStatusList(){
      let shipmentStatusList = [
        {status: WAIT_CONFIRM, text: getShipmentStatus2Str(WAIT_CONFIRM), num: 0},
        {status: WAIT_RECEIVE, text: getShipmentStatus2Str(WAIT_RECEIVE), num: 0},
        {status: WAIT_SORTING, text: getShipmentStatus2Str(WAIT_SORTING), num: 0},
        {status: FINISHED_SORTING, text: getShipmentStatus2Str(FINISHED_SORTING), num: 0},
        {status: FINISHED_SHELVES, text: getShipmentStatus2Str(FINISHED_SHELVES), num: 0},
        {status: 'all', text: '全部', num: 0}, // 全部
      ];

      return shipmentStatusList;
    }
  },
  data(){
    const shipmentTypeList = [
      {type: 'all', text: '全部'},
      {type: 'one_shipping', text: this.$t('shipment.oneStock')},
      {type: 'middle', text: '暂存中转'},
    ];

    return {
      shipmentTypeList,
      queryParams: {
        type: '',
        page: 1,
        pageSize: 20,
        shipmentType: shipmentTypeList[0].type, // 货件单类型
        labelStatus: '',
        keyword: '',
        transferType: '', // 运输类型
        // status2: shipmentStatusList[0].status, // 货件单状态
        status2: 'all', // 货件单状态
        planType: PLAN_TYPE_MW,
      },
      total: 0,
      data: [],
      loading: false,
      delLoading: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getShipmentTypeStr2,
    getMWTypeStr,
    getShipmentStatus2Str,
    FINISHED_SHELVES() {
      return FINISHED_SHELVES
    },
    jumpPageNewTag,
    jumpCombinationInfo,
    getShipmentTypeStr,
    getLabelStatusStr,
    jumpLabelOrderInfo,
    getShopeeName,
    getFalabellaName,
    getMercadoName,
    getWareHouseName,
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    getData(){
      this.loading = true;
      getShipmentList(this.queryParams)
        .then(res =>{
          this.loading = false
          this.data = deepCopy(res.data)
          this.total = res.info.total
          res.info.tabNumber.forEach(item=>{
            const status = item.status
            const num = item.num
            const obj = this.shipmentStatusList.find(_item=> _item.status === status)
            if(obj){
              obj.num = num
            }
          })
        })
    },
    addShipment(){
      this.$router.push({
        name: 'addShipment'
      })
    },
    jumpInfo(row){
      this.$router.push({
        name: 'shipmentInfo',
        query: {
          id: row.id
        }
      })
    },
    delRow(row){
      this.$warning( this.$t('shipment.cancelShipmentText'),{
        title: this.$t('shipment.cancelShipment'),
      })
        .then(()=>{
          this.delLoading = true
          deleteShipment(row.id)
            .then(res=>{
              this.delLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{

        })
    },
    canDelShipment(row){
      return row.planStatus === 'ready_to_ship'
    },
    changeShipmentType(){
      this.queryParams.status2 = 'all';
      this.changeOption()
    },
    addPlan(){
      this.$router.push({
        name: 'addShippingPlan',
        params: {
          type: PLAN_TYPE_MW,
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 20px 0 0;
  }

  .shipment-type-box{
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 10px;
  }
}
.platform-select{
  width: 215px;
}
</style>
